<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品管理</title>
    <link rel="stylesheet" href="../CSS/goods-Manage-css.css">
    <link rel="stylesheet" href="../CSS/font-awesome.min.css">
    <link rel="stylesheet" href="../web-design/layui-v2.6.8/layui/css/layui.css">
</head>
<script src="../js/jquery-3.4.1.min.js"></script>

<body>
<div class="main">
    <div class="navigation">
        <div class="head-portraits">
            <img src="../img/goktech-img/images/tx.png" alt="">
            <div class="hello">
                <span>${admin.uUsername}</span>
            </div>
        </div>
        <ul>
            <li>
                <a href="../homePage.jsp">
                    <span class="fa fa-home">&nbsp;主页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="fa fa-ravelry">&nbsp;数据报表</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="main-show">
        <div class="parcel-div">
            <div class="goods-show">
                <div class="title">商品信息管理</div>
                <div class="goods-list">
                    <div class="goods-column">
                        <span>商品名称</span>
                        <span>商品价格</span>
                        <span>商品详情</span>
                        <span>操作</span>
                    </div>
                    <ul class="ul">

                    </ul>
                </div>
                <div class="paging-controler">
                    <button class="btn1">上一页</button>
                    <div class="parcel-div">
                        <div class="left-part">
                            <span>当前页</span>
                        </div>
                        <div class="right-part">
                            <span>1</span>
                        </div>
                    </div>
                    <button class="btn2">下一页</button>
                </div>
            </div>
            <div class="goods-controler">
                <div class="font-logo">
                    <span>纵享极致的美</span>
                </div>
                <div class="add-goods">
                    <span class="fa fa-plus">&nbsp;添加商品</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 遮罩 -->
    <div class="mask"></div>
    <!-- 添加商品与编辑商品 -->
    <div class="edit-add-goods">
        <div class="close-lable">
            <span class="fa fa-times fa-2x"></span>
        </div>
        <div class="title">
            <span>添加商品</span>
        </div>
        <form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/commodity" enctype="multipart/form-data">
            <div class="parcel-div">
                <input type="hidden" name="method" value="addCommodity">
                <div class="goods-name-sort">
                    <input type="hidden" name="cgId" value="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="cmName" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品价格</label>
                        <div class="layui-input-block">
                            <input type="text" name="cmPrice" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品价格" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品类别</label>
                        <div class="layui-input-inline">
                            <select class="add-goods-sort" name="goods-sort">
                                <option value="">请选择商品类别</option>
                                <option value="1">浓情·欧式</option>
                                <option value="2">简约·现代</option>
                                <option value="3">复古·香薰炉</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="goods-upload-img">
                    <button type="button" class="layui-btn" id="upload-add-img-button">
                        <i class="layui-icon img1">&#xe67c;</i>上传图片
                    </button>
                    <img src="../img/goodsPreview/xx103/color-sort/green-xx103.jpg" alt="" class="img2">
                </div>
            </div>
            <div class="parcel-div">
                <div class="goods-color-select">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色1</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input" value="绿色" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色2</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input" value="橙色" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色3</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input" value="粉色" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色4</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input" value="白色" readonly>
                        </div>
                    </div>
                </div>
                <div class="goods-color-amount">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber0" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber1" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber2" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber3" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input">
                            <input type="hidden" name="cmImg" class="cmImg1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="parcel-div">
                <div class="left-part">
                    <label class="layui-form-label">商品详情</label>
                </div>
                <div class="right-part">
                    <div class="layui-input-block">
                        <textarea placeholder="请输入商品详情" class="layui-textarea text2" name="cmDetails"></textarea>
                    </div>
                </div>
            </div>
            <div class="save-goods-btn">
                <button>添加</button>
                <button>取消</button>
            </div>
        </form>
    </div>
    <!-- 编辑商品 -->
    <div class="edit-goods">
        <div class="close-lable">
            <span class="fa fa-times fa-2x"></span>
        </div>
        <div class="title">
            <span>编辑商品</span>
        </div>
        <form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/commodity" enctype="multipart/form-data">
            <div class="parcel-div">
                <div class="goods-name-sort">
                    <input type="hidden" name="cgId" id="cgId1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="cmName" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品名称" class="layui-input cmName">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品价格</label>
                        <div class="layui-input-block">
                            <input type="text" name="cmPrice" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品价格" class="layui-input cmPrice">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品类别</label>
                        <div class="layui-input-inline">
                            <select class="edit-goods-sort" name="goods-sort">
                                <option value="">请选择商品类别</option>
                                <option value="1" class="cg1">浓情·欧式</option>
                                <option value="2" class="cg2">简约·现代</option>
                                <option value="3" class="cg3">复古·香薰炉</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="goods-upload-img">
                    <button type="button" class="layui-btn" id="upload-edit-img-button">
                        <i class="layui-icon img2">&#xe67c;</i>上传图片
                    </button>
                    <img src="../img/goodsPreview/xx103/color-sort/green-xx103.jpg" alt="" class="img1">
                </div>
            </div>
            <div class="parcel-div">
                <div class="goods-color-select">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色1</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="method" value="updateCommodity">
                            <input type="text" name="cName0" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input color0" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色2</label>
                        <div class="layui-input-block">
                            <input type="text" name="cName1" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input color1" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色3</label>
                        <div class="layui-input-block">
                            <input type="text" name="cName2" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input color2" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品颜色4</label>
                        <div class="layui-input-block">
                            <input type="text" name="cName3" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品颜色" class="layui-input color3" readonly>
                        </div>
                    </div>
                </div>
                <div class="goods-color-amount">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber0" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input cNumber0">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber1" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input cNumber1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber2" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input cNumber2">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="cNumber3" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品数量" class="layui-input cNumber3">
                            <%--颜色id--%>
                            <input type="hidden" class="cId0" name="cId0">
                            <input type="hidden" class="cId1" name="cId1">
                            <input type="hidden" class="cId2" name="cId2">
                            <input type="hidden" class="cId3" name="cId3">

                            <%--商品id--%>
                            <input type="hidden" class="cmId" name="cmId" value="">

                            <%--图片路径--%>
                            <input type="hidden" class="cmImg" name="cmImg">
                        </div>
                    </div>
                </div>
            </div>
            <div class="parcel-div">
                <div class="left-part">
                    <label class="layui-form-label">商品详情</label>
                </div>
                <div class="right-part">
                    <div class="layui-input-block">
                        <textarea placeholder="请输入商品详情" class="layui-textarea text1" name="cmDetails"></textarea>
                    </div>
                </div>
            </div>
            <div class="save-goods-btn">
                <button>编辑</button>
                <button>取消</button>
            </div>
        </form>
    </div>
</div>
</body>
<script src="../web-design/layui-v2.6.13/layui/layui.js"></script>
<script src="../js/goods-Manage-js.js"></script>
<script>
    layui.use(['form'], function () {
        let form = layui.form;
        form.render();

        // //提交
        // form.on('submit(formDemo)', function (data) {
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
    });

    layui.use('upload', function () {
        let upload = layui.upload;

        //执行实例
        let uploadInst = upload.render({
            elem: '#upload-add-img-button' //绑定元素
            , url: '${pageContext.request.contextPath}/commodity?method=fileCommodityImg' //上传接口
            , done: function (res) {
                //上传完毕回调
                $(".img2").attr("src","../"+res);
            }
            , error: function () {
                //请求异常回调
            }
        });
    });

    layui.use('upload', function () {
        let upload = layui.upload;

        //执行实例
        let uploadInst = upload.render({
            elem: '#upload-edit-img-button' //绑定元素
            , url: '${pageContext.request.contextPath}/commodity?method=fileCommodityImg' //上传接口
            , done: function (res) {
                //上传完毕回调
                $(".img1").attr("src","../"+res);
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
</script>
<script>
    $(function () {
        $.ajax({
            url: "${pageContext.request.contextPath}/commodity?method=show",
            type: "POST",
            data: {"currentPath": 1},
            dataType: "json",
            success: function (message) {
                let str = ``;
                for (let i = 0; i < message.list.length; i++) {
                    str += `<li>
                                <div class="goods-name">
                                    <span>` + message.list[i].cmName + `</span>
                                </div>
                                <div class="goods-price">
                                    <span>￥` + message.list[i].cmPrice + `.00</span>
                                </div>
                                <div class="goods-detail">
                                    <span>` + message.list[i].cmDetails + `</span>
                                </div>
                                <div class="operate">
                                    <span class="fa fa-pencil" cmId="` + message.list[i].cmId + `"></span>
                                    <span class="fa fa-trash-o" cmId="` + message.list[i].cmId + `"></span>
                                </div>
                            </li>`;
                }
                $(".ul").html(str);
            }
        });
        $(".btn1").click(function () {
            let x = parseInt($(".right-part>span").text());
            if (x != 1) {
                x -= 1;
                $(".right-part>span").text(x);
                $.ajax({
                    url: "${pageContext.request.contextPath}/commodity?method=show",
                    type: "POST",
                    data: {"currentPath": x},
                    dataType: "json",
                    success: function (message) {
                        let str = ``;
                        for (let i = 0; i < message.list.length; i++) {
                            str += `<li>
                                <div class="goods-name">
                                    <span>` + message.list[i].cmName + `</span>
                                </div>
                                <div class="goods-price">
                                    <span>￥` + message.list[i].cmPrice + `</span>
                                </div>
                                <div class="goods-detail">
                                    <span>` + message.list[i].cmDetails + `</span>
                                </div>
                                <div class="operate">
                                    <span class="fa fa-pencil" cmId="` + message.list[i].cmId + `"></span>
                                    <span class="fa fa-trash-o" cmId="` + message.list[i].cmId + `"></span>
                                </div>
                            </li>`;
                        }
                        $(".ul").html(str);
                    }
                });
            } else {

            }
        });
        $(".btn2").click(function () {
            let x = parseInt($(".right-part>span").text());
            let y = parseInt("${pageBean.totalPath}")
            if (x < y) {
                x += 1;
                $(".right-part>span").text(x);
                $.ajax({
                    url: "${pageContext.request.contextPath}/commodity?method=show",
                    type: "POST",
                    data: {"currentPath": x},
                    dataType: "json",
                    success: function (message) {
                        let str = ``;
                        for (let i = 0; i < message.list.length; i++) {
                            str += `<li>
                                <div class="goods-name">
                                    <span>` + message.list[i].cmName + `</span>
                                </div>
                                <div class="goods-price">
                                    <span>￥` + message.list[i].cmPrice + `</span>
                                </div>
                                <div class="goods-detail">
                                    <span>` + message.list[i].cmDetails + `</span>
                                </div>
                                <div class="operate">
                                    <span class="fa fa-pencil" cmId="` + message.list[i].cmId + `"></span>
                                    <span class="fa fa-trash-o" cmId="` + message.list[i].cmId + `"></span>
                                </div>
                            </li>`;
                        }
                        $(".ul").html(str);
                    }
                });
            } else {

            }
        });
        $(".ul").on("click", ".fa-trash-o", function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/commodity?method=modifyCommodityByCmId",
                type: "POST",
                data: {"cmId": $(this).attr("cmid")},
                dataType: "json",
                success: function (message) {

                }
            });
            location.href = "${pageContext.request.contextPath}/ProgramJSP/goods-Manage.jsp";
        });

        //实现点击编辑商品按钮弹出编辑框
        $(".ul").on("click",".fa-pencil",function () {
            window.setInterval(function () {
                $(".cmImg").val($(".img1").attr("src").substring($(".img1").attr("src").indexOf("img")));
            },500);
            $(".cmid").val($(this).attr("cmid"));
            console.log($(this).attr("cmid"));
            $.ajax({
                url: "${pageContext.request.contextPath}/commodity?method=EditItem",
                type: "POST",
                data: {"cmId": $(this).attr("cmid")},
                dataType: "json",
                success: function (message) {
                    $(".cmName").val(message.cmName);
                    $(".cgName").val(message.cgName);
                    $(".color0").val(message.list[0].cName);
                    $(".cNumber0").val(message.list[0].cNumber);
                    $(".color1").val(message.list[1].cName);
                    $(".cNumber1").val(message.list[1].cNumber);
                    $(".color2").val(message.list[2].cName);
                    $(".cNumber2").val(message.list[2].cNumber);
                    $(".color3").val(message.list[3].cName);
                    $(".cNumber3").val(message.list[3].cNumber);
                    $(".text1").val(message.cmDetails);
                    $(".img1").attr("src","../"+message.cmImg);
                    $(".cId0").val(message.list[0].cId);
                    $(".cId1").val(message.list[1].cId);
                    $(".cId2").val(message.list[2].cId);
                    $(".cId3").val(message.list[3].cId);
                    $(".cmPrice").val(message.cmPrice+".00");
                    // $(".cmImg").val(message.cmImg);
                    // console.log(message.cmImg);
                    if(message.cgId==1){
                        $(".cg1").attr("selected",true);
                    }
                    if(message.cgId==2){
                        $(".cg2").attr("selected",true);
                    }
                    if(message.cgId==3){
                        $(".cg3").attr("selected",true);
                    }
                }
            });
            $(".mask").css("display", "block");
            $(".edit-goods").css("display", "block");
        });

        window.setInterval(function () {
            $(".cmImg1").val($(".img2").attr("src").substring($(".img2").attr("src").indexOf("img")));
        },500);

    })
</script>

</html>
